<template>
  <div class="change">
    <el-form ref="userPasswordRef" :model="password" :rules="userpasswordRules">
      <el-form-item label="当前密码" prop="oldPwd">
        <el-input v-model="password.oldPwd" type="password" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPwd">
        <el-input v-model="password.newPwd" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button class="detail" @click="submit">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { changePassword } from '@/api/profile'
export default {
  data() {
    return {
      password: {
        oldPwd: '',
        newPwd: ''
      },
      userpasswordRules: {
        oldPwd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs['userPasswordRef'].validate((valid) => {
        if (valid) {
          changePassword(this.password).then((response) => {
            this.$message({
              type: 'success',
              message: '修改密码成功!'
            })
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.detail {
  background-color: lightseagreen;
  color: #fff;
  border-radius: 10px;
  border: none;
}
.detail:hover {
  background-color: rgb(34, 149, 194);
  color: #fff;
  border-radius: 10px;
  border: none;
}
</style>
